<template>
  <div v-if="!refreshing">
    <el-menu  :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffff00">
      <el-menu-item index="0" route="/" style="font-size: 21px; font-family: 华文行楷"> <img src="static/image/iS3.png"> 隧道智能服务平台 </el-menu-item>
      <el-menu-item index="1" style="font-size: 18px; font-family: 华文行楷"><i class="el-icon-upload2"></i>数据上传</el-menu-item>
      <el-menu-item index="2" style="font-size: 18px; font-family: 华文行楷"><i class="el-icon-files"></i>数据查看</el-menu-item>
      <el-menu-item index="3" style="font-size: 18px; font-family: 华文行楷"><i class="el-icon-location-information"></i>当前位置</el-menu-item>
      <el-menu-item index="4" style="font-size: 18px; font-family: 华文行楷"><i class="el-icon-position"></i>二维展示</el-menu-item>
      <el-menu-item index="5" style="font-size: 18px; font-family: 华文行楷"><i class="el-icon-view"></i>三维展示</el-menu-item>
      <el-menu-item index="6" style="font-size: 18px; font-family: 华文行楷"><i class="el-icon-picture-outline-round"></i>Cesium开发</el-menu-item>
      <el-menu-item index="7" style="font-size: 18px; font-family: 华文行楷"><i class="el-icon-data-line"></i>模型分析</el-menu-item>
    </el-menu>
    <div v-if = "activeIndex == '0'">
      <div style="
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      background-size: cover;
      background-image: url(static/image/background-sci.jpeg)">
      </div>
    </div>
    <div v-if = "activeIndex == '1'">
      <div style="
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      background-size: cover;
      background-image: url(static/image/pingtai.png)">
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="24"><div class="grid-content" style="width: 450px;height: 540px; text-align: center">
          <div class="root">
            <div class="search">
              <img src="static/image/shangchuan.png">
              <el-input placeholder="请输入隧道项目名称" v-model="keyword" clearable class="input-with-select">
                <el-button @click="goSearch" type="primary" slot="append" icon="el-icon-search">搜索</el-button>
              </el-input>
            </div>

            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip"><b>只能上传xlsx文件，且不超过10MB</b></div>
            </el-upload>
            <el-table
              :data="tableData"
              style="width: 100%"
              :default-sort="{prop: 'createDate', order: 'descending'}"
            >
              <el-table-column prop="name" label="项目名称" show-overflow-tooltip></el-table-column>
              <el-table-column label="上传日期" prop="createDate" sortable>
                <!-- <template slot-scope="scope">{{ scope.row.createDate }}</template> -->
              </el-table-column>
              <el-table-column prop="img_url" label="数据表格单元">
                <div slot-scope="scope" class="my-pic">
                  <el-image
                    @click="imgClick(scope.row.imgUrl)"
                    fit="scale-down"
                    style="width: 120px; height: 120px"
                    :src="scope.row.imgUrl"
                    :preview-src-list="srcList"
                  ></el-image>
                </div>
              </el-table-column>
              <el-table-column label="其他操作">
                <div slot-scope="scope">
                  <el-button @click="deleteLogo(scope.row.id)" size="small" type="danger" round>删除</el-button>
                  <el-button
                    @click="downloadFile(scope.row.name,scope.row.imgUrl)"
                    size="small"
                    type="primary"
                    round
                  >下载</el-button>
                </div>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagination"
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              @current-change="pageChange"
              @prev-click="pageChange"
              @next-click="pageChange"
            ></el-pagination>
            <el-button size="medium" type="primary">点击上传</el-button>
          </div>
        </div></el-col>
      </el-row>

      </div>
    </div>
    <!-- 数据展示部分 -->
    <div v-if = "activeIndex == '2'">
      <el-row :gutter="9">
        <el-col :span="4">
          <div>
            <div> <!--p style="font-family:华文行楷;color: #409eff;font-size: 24px">团体标准<br>数据汇总表：</p-->
              <img src="static/image/huizong.png">
            </div>
            <div class="grid-content bg-purple" style="display: flex;flex-direction: column;max-height: 750px;overflow-y: auto">
              <div style="margin-top: 6px;" :class="{'active':selectCode==item.code,'normal':selectCode!=item.code}"
                   v-for="(item,index) in defs" :key="index" @click="selectObj(item)">
                <div style="padding: 2px;margin-left: 20px; color: #ffffff">
                  {{item.num}}：{{item.name}}-{{item.code}}
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <div v-if="selectItem && (selectCode=='PLAL'||selectCode=='BUIL' || selectCode=='INNE')">
          <el-col :span="8"><div class="grid-content" style="width:600px;height:100%;display: flex;flex-direction: column">
            <div>
              <img src="static/image/biaotou.png">
              <el-table
                v-if="selectItem"
                :data="selectItem.def"
                style="width: 100%;height: 400px"
                max-height="400px"
                stripe="true"
                border="true"
                fit="true"
              >
                <el-table-column
                  prop="name"
                  label="name"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="Heading"
                  label="Heading"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="Status"
                  label="Status"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="TYPE"
                  label="TYPE"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="Description"
                  label="Description"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
            <div>
              <img src="static/image/neirong.png">
              <el-table
                v-if="selectData"
                :data="selectData"
                style="width: 100%;height: 400px"
                max-height="400px"
                stripe="true"
                border="true"
                fit="true">
                <el-table-column
                  v-for="(item,index) in selectItem.def"
                  :key="index"
                  :prop="item.Heading"
                  :label="item.name"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
          </div>
          </el-col>

          <el-col :span="11"><div class="grid-content" style="width:1000px;height:100%;display: flex; flex-direction: column">
            <div>
              <img src="static/image/erwei.png">
              <div v-if="selectCode=='PLAL'">
                <pingmian/>
              </div>
              <div v-else-if="selectCode=='BUIL'">
                <d1 />
              </div>
              <div v-else>
                <d3 />
              </div>
            </div>

          </div>
          </el-col>
        </div>

        <!-- ELSE !-->
        <div v-else>
          <el-col :span="10"><div class="grid-content" style="width:700px;height:700px;display: flex;flex-direction: column">
            <div>
              <img src="static/image/biaotou.png">
              <el-table
                v-if="selectItem"
                :data="selectItem.def"
                style="width: 100%;height: 900px"
                max-height="900px"
                stripe="true"
                border="true"
                fit="true"
              >
                <el-table-column
                  prop="name"
                  label="name"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="Heading"
                  label="Heading"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="Status"
                  label="Status"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="TYPE"
                  label="TYPE"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="Description"
                  label="Description"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
          </div>
          </el-col>
          <el-col :span="10"><div class="grid-content" style="width:800px;height:700px;display: flex;flex-direction: column">
            <div>
              <img src="static/image/neirong.png">
              <el-table
                v-if="selectData"
                :data="selectData"
                style="width: 100%;height: 900px"
                max-height="900px"
                stripe="true"
                border="true"
                fit="true">
                <el-table-column
                  v-for="(item,index) in selectItem.def"
                  :key="index"
                  :prop="item.Heading"
                  :label="item.name"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
          </div></el-col>
        </div>

      </el-row>
      <div style="display: flex;flex-direction: column">
        <el-table
          v-if="selectItem"
          :data="selectItem.def"
          style="width: 100%;height: 900px"
          max-height="900px"
          stripe="true"
          border="true">
          <el-table-column
            prop="name"
            label="name"
            width="180">
          </el-table-column>
          <el-table-column
            prop="Heading"
            label="Heading"
            width="180">
          </el-table-column>
          <el-table-column
            prop="Status"
            label="Status"
            width="180">
          </el-table-column>
          <el-table-column
            prop="TYPE"
            label="TYPE"
            width="180">
          </el-table-column>
          <el-table-column
            prop="Description"
            label="Description"
            width="180">
          </el-table-column>
        </el-table>

        <el-table
          v-if="selectData"
          :data="selectData"
          style="width: 100%;height: 900px"
          max-height="900px"
          stripe="true"
          border="true">
          <el-table-column
            v-for="(item,index) in selectItem.def"
            :key="index"
            :prop="item.Heading"
            :label="item.name"
            width="180">
          </el-table-column>
        </el-table>

        <div style="width:700px;height:100px">
          <adilis></adilis>
        </div>

      </div>
      <div style ="width:700px;height:400px">
        <p> Fuck you VUE!</p>
        <button @click="sayByeBye">
          Click ME!
        </button>
        <pingmian></pingmian>
      </div>
    </div>

    <div v-if = "activeIndex == '3'">
      <div style="max-height: 600px" >
      <d0 />
      </div>
    </div>
    <div v-if = "activeIndex == '4'">
      <div style="max-height: 600px" >
        <pingmian />
      </div>
    </div>
    <div v-if = "activeIndex == '5'">
      <div style="max-height: 600px" >
        <DTTunnel />
      </div>
    </div>
    <div v-if = "activeIndex == '6'">
      <div style="height: auto" >
        <adilis />
      </div>
    </div>
    <div v-if = "activeIndex == '7'">
      <div style="height: auto" >
        <d3 />
      </div>
    </div>
  </div>
</template>

<script>
  import DTTunnel from "./DTTunnel.vue"
  //import jiemian from "./jiemian.vue"
  import adilis from "./adilis.vue"
  import pingmian from './D2.vue'
  import d1 from './D1.vue'
  import d0 from './D0.vue'
  import d3 from './D3.vue'
  import axios from 'axios'

  // let baseUrl = 'http://localhost:3000'
  let baseUrl = ''
  let prjCode = 'laoying'

  //let message = String("fuck in Vue!")

  export default {

    components:{DTTunnel,adilis,pingmian,d0,d1,d3},
    data () {
      return {
        defs: [],
        refreshing: true,
        activeIndex: '2',
        selectCode: null,
        selectItem: null,
        selectData: null,
      }
    },
    created () {
      debugger
      axios.get(baseUrl + '/api/prj/def?code=' + prjCode)
        .then(
          res => {
            this.defs = res.data
            console.log(this.defs)
            this.refreshing = false
          }
        )
    },
    mounted () {
    },
    methods: {
      sayByeBye: function (event) {
        alert(this.defs);
      },
      selectObj (item) {
        this.selectItem = item;
        this.selectCode = item.code
        axios.get(`/api/prj/data?code=${prjCode}&objCode=${item.code}`)
          .then(
            res => {
              console.log(res.data)
              this.selectData = res.data
            })
      },
      handleSelect(index){
        this.activeIndex = index;
      }
    }
  }
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #545c64;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .active{
    background-color: #3b64ac;
  }
  .normal{
    background-color: #545c64;
  }
</style>
